<template>
    <header class="header" :class="{ 'header-scrolled': isScrolled }">
      <div class="header-container">
        <div class="logo" @click="scrollToTop">
          <span class="logo-text">{{ name.charAt(0) }}</span>
        </div>
        
        <nav class="nav-desktop">
          <ul>
            <li v-for="item in navItems" :key="item.id">
              <a :href="item.path" @click.prevent="scrollToSection(item.path)">{{ item.label }}</a>
            </li>
          </ul>
        </nav>
        
        <div class="nav-mobile-toggle" @click="toggleMobileMenu">
          <span></span>
          <span></span>
          <span></span>
        </div>
      </div>
      
      <div class="nav-mobile" :class="{ 'nav-mobile-open': isMobileMenuOpen }">
        <ul>
          <li v-for="item in navItems" :key="item.id">
            <a :href="item.path" @click.prevent="scrollToSection(item.path); closeMobileMenu()">
              {{ item.label }}
            </a>
          </li>
        </ul>
      </div>
    </header>
  </template>
  
  <script setup>
  import { ref, onMounted, onUnmounted } from 'vue';
  
  const props = defineProps({
    navItems: {
      type: Array,
      required: true
    }
  });
  
  const name = 'Portfolio'; // 可以从配置中获取
  const isScrolled = ref(false);
  const isMobileMenuOpen = ref(false);
  
  // 监听滚动事件
  const handleScroll = () => {
    isScrolled.value = window.scrollY > 50;
  };
  
  const toggleMobileMenu = () => {
    isMobileMenuOpen.value = !isMobileMenuOpen.value;
    
    // 阻止滚动
    if (isMobileMenuOpen.value) {
      document.body.style.overflow = 'hidden';
    } else {
      document.body.style.overflow = '';
    }
  };
  
  const closeMobileMenu = () => {
    isMobileMenuOpen.value = false;
    document.body.style.overflow = '';
  };
  
  const scrollToTop = () => {
    window.scrollTo({
      top: 0,
      behavior: 'smooth'
    });
    
  };
  
  const scrollToSection = (path) => {
    const sectionId = path.replace('#', '');
    const section = document.getElementById(sectionId);
    
    if (section) {
      const offsetTop = section.offsetTop;
      
      window.scrollTo({
        top: offsetTop - 80, // 减去header高度
        behavior: 'smooth'
      });
    }
  };
  
  onMounted(() => {
    window.addEventListener('scroll', handleScroll);
    handleScroll(); // 初始化
  });
  
  onUnmounted(() => {
    window.removeEventListener('scroll', handleScroll);
  });
  </script>
  
  <style lang="scss" scoped>
  @import '../styles/variables.scss';
  @import '../styles/responsive.scss';
  
  .header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    transition: all 0.3s ease;
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(5px);
    
    &-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      max-width: 1440px;
      margin: 0 auto;
      padding: 1rem 2rem;
      
      @include mobile {
        padding: 1rem;
      }
    }
    
    &-scrolled {
      background-color: rgba(255, 255, 255, 0.98);
      box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
    }
  }
  
  .logo {
    display: flex;
    align-items: center;
    cursor: pointer;
    
    &-text {
      font-size: 2rem;
      font-weight: 700;
      color: $primary-color;
      background: linear-gradient(135deg, $primary-color, $accent-color);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
  
  .nav-desktop {
    @include mobile {
      display: none;
    }
    
    ul {
      display: flex;
      gap: 2rem;
      list-style: none;
      
      li a {
        text-decoration: none;
        color: $text-color;
        font-weight: 500;
        position: relative;
        padding: 0.5rem 0;
        transition: color 0.3s ease;
        
        &:hover {
          color: $primary-color;
        }
        
        &:after {
          content: '';
          position: absolute;
          width: 0;
          height: 2px;
          bottom: 0;
          left: 0;
          background-color: $primary-color;
          transition: width 0.3s ease;
        }
        
        &:hover:after {
          width: 100%;
        }
      }
    }
  }
  
  .nav-mobile-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 20px;
    cursor: pointer;
    
    @include mobile {
      display: flex;
    }
    
    span {
      width: 100%;
      height: 2px;
      background-color: $text-color;
      transition: all 0.3s ease;
    }
  }
  
  .nav-mobile {
    position: fixed;
    top: 0;
    right: -100%;
    width: 70%;
    height: 100vh;
    background-color: white;
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
    transition: right 0.3s ease;
    z-index: 999;
    
    &-open {
      right: 0;
    }
    
    ul {
      padding: 5rem 2rem;
      list-style: none;
      
      li {
        margin-bottom: 1.5rem;
        
        a {
          text-decoration: none;
          color: $text-color;
          font-size: 1.2rem;
          font-weight: 500;
          transition: color 0.3s ease;
          
          &:hover {
            color: $primary-color;
          }
        }
      }
    }
  }
  </style>